<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8">
<title>基本的页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
	<div data-role="header">
		<h1>JQM</h1>
	</div>
	<div data-role="content">
	
	
			<ul data-role="listview" data-inset="true">
				<li><a href="#l1">有序/无序列表</a></li>
				<li><a href="#l2">圆角列表</a></li>
				<li><a href="#l3">列表分隔符</a></li>
				<li><a href="#l4">自动分隔符/过滤/占位提示符</a></li>
				<li><a href="#l5">内容处理</a></li>
				<li><a href="#l6">更改默认右边图标</a></li>
				<li><a href="#l7">可折叠式列表</a></li>
				<li><a href="#l8">列表分隔符</a></li>
			</ul>
			
	</div>
	<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="#index1" data-icon="camera">导航1</a></li>
				<li><a href="#index2" data-icon="camera">导航2</a></li>
				<li><a href="#index3" data-icon="camera">导航3</a></li>
			</ul>
		</div>
	</div>
</div>

<div data-role="page" id="l1">
	<div data-role="header">
		<h1>data-role="listview"</h1>
		<a href="#" data-role="button" data-rel="back" class="ui-btn-left" data-icon="back">返回</a>
	</div>
	<div data-role="content">
	   <h2>有序列表：</h2>
		<ol data-role="listview">
			<li><a href="#">列表1</a></li>
			<li><a href="#">列表2</a></li>
			<li><a href="#">列表3</a></li>
		</ol>
		   <h2>无序列表：</h2>
		<ul data-role="listview">
			<li><a href="#">列表1</a></li>
			<li><a href="#">列表2</a></li>
			<li><a href="#">列表3</a></li>
		</ul>
	</div>
	<div data-role="footer" data-position="fixed">
		<h1>我是页脚</h1>
	</div>
</div>


<div data-role="page" id="l2">
	<div data-role="header">
		<h1>data-inset="true"</h1>
		<a href="#" data-role="button" data-rel="back" class="ui-btn-left" data-icon="back">返回</a>
	</div>
	<div data-role="content">
		<ul data-role="listview" data-inset="true">
			<li><a href="#">列表1</a></li>
			<li><a href="#">列表2</a></li>
			<li><a href="#">列表3</a></li>
		</ul>
	</div>
	<div data-role="footer" data-position="fixed">
		<h1>我是页脚</h1>
	</div>
</div>
<div data-role="page" id="l3">
	<div data-role="header">
		<h1>data-role="list-divider"</h1>
		<a href="#" data-role="button" data-rel="back" class="ui-btn-left" data-icon="back">返回</a>
	</div>
	<div data-role="content">
		<ul data-role="listview">
			<li data-role="list-divider">欧洲</li>
      <li><a href="#">德国</a></li>
      <li><a href="#">英国</a></li>
      <li data-role="list-divider">亚洲</li>
      <li><a href="#">中国</a></li>
      <li><a href="#">印度</a></li>
      <li data-role="list-divider">非洲</li>
      <li><a href="#">埃及</a></li>
      <li><a href="#">南非</a></li>
		</ul>
	</div>
	<div data-role="footer" data-position="fixed">
		<h1>我是页脚</h1>
	</div>
</div>
<div data-role="page" id="l4">
	<div data-role="header">
		<h1>data-role="list-divider"</h1>
		<a href="#" data-role="button" data-rel="back" class="ui-btn-left" data-icon="back">返回</a>
	</div>
	<div data-role="content">
		<ul data-role="listview" data-autodividers="true" data-filter="true" data-filter-placeholder="搜索姓名">
	      <li><a href="#">A</a></li>
	      <li><a href="#">AXC</a></li>
	      <li><a href="#">BB</a></li>
	      <li><a href="#">DE</a></li>
	      <li><a href="#">PC</a></li>
	      <li><a href="#">DD</a></li>
		</ul>
	</div>
	<div data-role="footer" data-position="fixed">
		<h1>我是页脚</h1>
	</div>
</div>

<div data-role="page" id="l5">
	<div data-role="header">
		<h1>内容处理</h1>
		<a href="#" data-role="button" data-rel="back" class="ui-btn-left" data-icon="back">返回</a>
	</div>
	<div data-role="content">
		<ul data-role="listview" data-inset="true">
			 <li data-role="divider">浏览器</li>
			<li><a href="#">
			<img alt="" src="chrome.png">
			<h2>谷歌浏览器</h2>
			<p>谷歌浏览器</p>
			</a></li>
			<li><a href="#"><img alt="" src="chrome.png" class="ui-li-icon">列表3</a></li>
		</ul>
		拆分按钮
		<ul data-role="listview" data-inset="true">
			 <li data-role="divider">浏览器</li>
			<li><a href="#">
			<img alt="" src="chrome.png">
			<h2>谷歌浏览器</h2>
			<p>谷歌浏览器</p>
			</a>
			<a href="#download" data-rel="dialog" data-transition="pop">Some Text</a>
			</li>
			<li>
			<a href="#"><img alt="" src="chrome.png" class="ui-li-icon">列表3</a>
			<a href="#download" data-rel="dialog" data-transition="pop">Some Text</a>
			</li>
		</ul>
		计数气泡
		<ul data-role="listview" data-inset="true">
			 <li data-role="divider">浏览器</li>
			<li><a href="#">
			<img alt="" src="chrome.png">
			<h2>谷歌浏览器</h2>
			<p>谷歌浏览器</p>
			<span class="ui-li-count">335</span></a>
			</li>
			<li>
			<a href="#"><img alt="" src="chrome.png" class="ui-li-icon">列表3</a>
			<span class="ui-li-count">335</span>
			</li>
		</ul>
	</div>
	<div data-role="footer" data-position="fixed">
		<h1>我是页脚</h1>
	</div>
</div>
<div data-role="page" id="l6">
  <div data-role="content">
  <ul data-role="listview" data-filter="true">
	      <li data-icon="plus"><a href="#" >A</a></li>
	      <li data-icon="minus"><a href="#">AXC</a></li>
	      <li data-icon="delete"><a href="#">BB</a></li>
	      <li data-icon="info"><a href="#">DE</a></li>
	      <li data-icon="false"><a href="#">PC</a></li>
	      <li><a href="#">DD</a></li>
		</ul>
  </div>
</div>

<div data-role="page" id="download">
  <div data-role="content">
  <h3>拆分按钮实例</h3>
    <p>该按钮仅供演示。</p>
    <a href="#" data-role="button" data-rel="back" data-icon="check" data-inline="true" data-mini="true">下载</a>
    <a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">取消</a>
  </div>
</div>
<div data-role="page" id="index3">
  <div data-role="header">
    <h1>我是一个对话框！</h1>
  </div>

  <div data-role="content">
    <p>对话框与普通页面不同，它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。</p>
    <a href="#pageone">转到页面一</a>
  </div>

  <div data-role="footer">
  <h1>页脚文本</h1>
  </div>
<script>
$(document).on("pageshow","#index2",function(){
	//alert("index2.pageshow");
});
</script>
</body>
</html>